{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}
{{ block.super }}
<style>
    .stats-container {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    .overview-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 30px;
    }
    .stat-card {
        background: white;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        text-align: center;
    }
    .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: #007bff;
    }
    .stat-label {
        font-size: 14px;
        color: #6c757d;
    }
    .section-title {
        font-size: 18px;
        font-weight: bold;
        margin: 20px 0 15px 0;
        color: #495057;
        border-bottom: 2px solid #007bff;
        padding-bottom: 5px;
    }
    .level-stats-table {
        background: white;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        margin-bottom: 30px;
    }
    .table-header {
        background: #28a745;
        color: white;
        padding: 15px;
        font-weight: bold;
    }
    .level-row {
        display: grid;
        grid-template-columns: 1fr 100px 100px 100px 100px;
        gap: 10px;
        padding: 15px;
        border-bottom: 1px solid #e9ecef;
        align-items: center;
    }
    .level-row:nth-child(even) {
        background: #f8f9fa;
    }
    .progress-bar {
        background: #e9ecef;
        border-radius: 10px;
        height: 10px;
        overflow: hidden;
        margin-top: 5px;
    }
    .progress-fill {
        background: #28a745;
        height: 100%;
        transition: width 0.3s ease;
    }
    .action-buttons {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }
    .action-btn {
        padding: 8px 15px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        text-decoration: none;
        font-size: 14px;
    }
    .action-btn.primary {
        background: #007bff;
        color: white;
    }
    .action-btn.secondary {
        background: #6c757d;
        color: white;
    }
    .accuracy-badge {
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: bold;
    }
    .accuracy-high { background: #d4edda; color: #155724; }
    .accuracy-medium { background: #fff3cd; color: #856404; }
    .accuracy-low { background: #f8d7da; color: #721c24; }
</style>
{% endblock %}

{% block content %}
<div class="stats-container">
    <h1>{{ title }}</h1>
    
    <!-- 操作按钮 -->
    <div class="action-buttons">
        <a href="/admin/challenge/leaderboard/" class="action-btn primary">
            ← 返回排行榜
        </a>
        <a href="/admin/challenge/" class="action-btn secondary">
            挑战系统首页
        </a>
        <a href="/admin/challenge/userscore/" class="action-btn secondary">
            管理用户积分
        </a>
    </div>
    
    <!-- 总体统计 -->
    <div class="section-title">总体统计</div>
    <div class="overview-stats">
        <div class="stat-card">
            <div class="stat-value">{{ total_levels }}</div>
            <div class="stat-label">关卡总数</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ total_questions }}</div>
            <div class="stat-label">题目总数</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ total_users_with_scores }}</div>
            <div class="stat-label">有积分用户数</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ active_users }}</div>
            <div class="stat-label">活跃用户数</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">{{ total_answers }}</div>
            <div class="stat-label">总答题数</div>
        </div>
    </div>
    
    <!-- 关卡统计 -->
    <div class="section-title">关卡统计</div>
    <div class="level-stats-table">
        <div class="table-header">
            <div class="level-row">
                <div>关卡名称</div>
                <div>题目数量</div>
                <div>答题次数</div>
                <div>正确次数</div>
                <div>正确率</div>
            </div>
        </div>
        
        <div class="table-body">
            {% for stat in level_stats %}
            <div class="level-row">
                <div>
                    <strong>{{ stat.level.level_name }}</strong><br>
                    <small style="color: #6c757d;">难度系数: {{ stat.level.difficulty_factor }}</small>
                </div>
                <div>{{ stat.question_count }}</div>
                <div>{{ stat.answer_count }}</div>
                <div>{{ stat.correct_count }}</div>
                <div>
                    {% if stat.accuracy > 80 %}
                        <span class="accuracy-badge accuracy-high">{{ stat.accuracy }}%</span>
                    {% elif stat.accuracy > 60 %}
                        <span class="accuracy-badge accuracy-medium">{{ stat.accuracy }}%</span>
                    {% else %}
                        <span class="accuracy-badge accuracy-low">{{ stat.accuracy }}%</span>
                    {% endif %}
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: {{ stat.accuracy }}%"></div>
                    </div>
                </div>
            </div>
            {% empty %}
            <div class="level-row" style="justify-content: center;">
                <div>暂无关卡数据</div>
            </div>
            {% endfor %}
        </div>
    </div>
    
    <!-- 用户行为分析 -->
    <div class="section-title">用户行为分析</div>
    <div class="overview-stats">
        <div class="stat-card">
            <div class="stat-value">
                {% if total_answers > 0 %}
                    {{ total_answers|add:0|divisibleby:total_users_with_scores|default:0 }}
                {% else %}
                    0
                {% endif %}
            </div>
            <div class="stat-label">平均答题数</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">
                {% if total_questions > 0 %}
                    {{ total_answers|add:0|divisibleby:total_questions|default:0 }}
                {% else %}
                    0
                {% endif %}
            </div>
            <div class="stat-label">题目平均答题次数</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">
                {% if total_levels > 0 %}
                    {{ total_questions|add:0|divisibleby:total_levels|default:0 }}
                {% else %}
                    0
                {% endif %}
            </div>
            <div class="stat-label">每关平均题目数</div>
        </div>
        <div class="stat-card">
            <div class="stat-value">
                {% if active_users > 0 %}
                    {{ active_users|add:0|divisibleby:total_users_with_scores|multiply:100|floatformat:1 }}%
                {% else %}
                    0%
                {% endif %}
            </div>
            <div class="stat-label">用户活跃率</div>
        </div>
    </div>
</div>
{% endblock %}